import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
function NotFound() {
  const [count, setCount] = useState(15)
  const navigate = useNavigate()
  const timerRef = useRef<any>(-1)
  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
    return () => {
      console.log('404 页面卸载')
      clearInterval(timerRef.current)
    }
  }, [])
  useEffect(() => {
    if (count === 0) {
      navigate('/', { replace: true })
    }
  }, [count, navigate])
  return (
    <div className={styles.root}>
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/home">首页</Link>）
      </p>
    </div>
  )
}

export default NotFound
